<template>
  <div>
    <h2>时间选择/转换</h2>
    <p style="margin-bottom: 50px">常用时间操作封装、更多功能请查阅element-ui日期组件</p>

    <el-divider content-position="left">日期查询选择框</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item" style="width: 350px;">
          <es-time
             v-model="value"
             type="search"
          ></es-time>
        </div>

      </div>
      <div class="meta">
        <div class="description">
          type 为 search时 显示日期查询选择框
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-time
            <br>&nbsp;&nbsp;&nbsp;&nbsp;v-model="<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;type="<span class="attr">search</span>"
            <br>> &lt;/es-time>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>


    <el-divider content-position="left">时间转换</el-divider>
    <div class="demo-block">
      <div class="source">
        <div class="demo-item" style="width: 350px;">
          <es-time
            v-model="value2"
            type="format"
            format="yyyy-MM-dd hh:mm:ss"
          ></es-time>
        </div>

      </div>
      <div class="meta">
        <div class="description">
          type 为 format表示时间转义
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-time
            <br>&nbsp;&nbsp;&nbsp;&nbsp;v-model="<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;type="<span class="attr">format</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;format="<span class="attr">yyyy-MM-dd hh:mm:ss</span>"
            <br>> &lt;/es-time>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>




    <el-divider content-position="left">Attributes</el-divider>
    <div class="demo-block demo-table">
      <demo-table :table-data="tableData"></demo-table>
    </div>

  </div>
</template>

<script>
  import DemoTable from '../../components/module/demo-table'

  export default {
    name: 'zwTreeDemo',
    components: {DemoTable},
    data () {
      return {
        showId: 0,
        value: [ "2018-12-31T16:00:00.000Z", "2019-12-30T16:00:00.000Z" ],
        value2: new Date().getTime(),
        tableData: [
          {
            param: 'v-model',
            remark: 'search时使用数组、type时时间字符串或时间戳',
            type: 'string/number/Array',
            usable: '—',
            default: '—'
          },
          {
            param: 'type',
            remark: 'search 时间选择框/format 时间转义',
            type: 'string',
            usable: 'search/format',
            default: '—'
          },
          {
            param: 'format',
            remark: '时间格式，type为format时填',
            type: 'string',
            usable: '—',
            default: '—'
          },
        ]
      }
    },
    methods: {
      showCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'block'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[6].style.display = 'block'
      },
      hideCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'none'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[4].style.display = 'block'
      },
    }
  }
</script>

<style scoped>
  .demo-block {

  }
</style>
